<% if (plugins.languages) { %>
  <section>
    <h2 class="field">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
      <%= plugins.languages.unique %> Language<%= s(plugins.languages.unique) %>
    </h2>
  </section>
  <% for (const section of (plugins.languages.sections ?? ["error"])) { const languages = {"most-used":plugins.languages.favorites, "recently-used":plugins.languages.recent}[section] %>
    <section class="column">
      <h3 class="field">
        <%= {"most-used":"Most used languages", "recently-used":"Recently used languages", error:""}[section] %>
      </h3>
      <% if (plugins.languages.error) { %>
        <section>
          <div class="field error">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
            <%= plugins.languages.error.message %>
          </div>
        </section>
      <% } else { const width = 460 * (1 + large) %>
        <% if (section === "recently-used") { %>
          <small>
            estimation from <%= plugins.languages["stats.recent"]?.files %> edited file<%= s(plugins.languages["stats.recent"]?.files) %> from <%= plugins.languages["stats.recent"]?.commits %> commit<%= s(plugins.languages["stats.recent"]?.commits) %>
            <% if (plugins.languages["stats.recent"]?.branch) { %>
              on branch <%= plugins.languages["stats.recent"].branch %>
            <% } %>
            <% { const days = plugins.languages["stats.recent"]?.latest ?? plugins.languages["stats.recent"]?.days; if (days) { %>
              over last <%= days %> day<%= s(days) %>
            <% } } %>
          </small>
        <% } %>
        <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
          <mask id="languages-bar">
            <rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
          </mask>
          <rect mask="url(#languages-bar)" x="0" y="0" width="<%= languages.length ? 0 : width %>" height="8" fill="#d1d5da"/>
          <% for (const {name, value, color, x} of languages) { %>
            <rect mask="url(#languages-bar)" x="<%= x*width %>" y="0" width="<%= value*width %>" height="8" fill="<%= color ?? "#959DA5" %>"/>
          <% } %>
        </svg>
        <% if (plugins.languages.details?.length) { const rows = large ? [0, 1, 2, 3] : [0, 1] %>
          <div class="row fill-width">
            <% for (const row of rows) { %>
              <section>
                <% for (const {name, value, lines = 0, color, size} of languages.filter((_, i) => i%rows.length === row)) { %>
                  <div class="field language details">
                    <div class="field">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="<%= color ?? "#959DA5" %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                      <%= name %>
                    </div>
                    <small>
                      <% if (plugins.languages.details.includes("lines")) { %> <div><%= f(lines) %> line<%= s(lines) %></div><% } %>
                      <% if (plugins.languages.details.includes("bytes-size")) { %> <div><%= f.bytes(size) %></div><% } %>
                      <% if (plugins.languages.details.includes("percentage")) { %> <div><%= f.percentage(value) %></div><% } %>
                    </small>
                  </div>
                <% } %>
              </section>
            <% } %>
          </div>
        <% } else { %>
          <div class="field center horizontal-wrap fill-width">
            <% for (const {name, value, color} of languages) { %>
              <div class="field center no-wrap language">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="<%= color %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                <%= name %>
              </div>
            <% } %>
          </div>
        <% } %>
      <% } %>
    </section>
  <% } %>
<% } %>